<template>
    <div class="mainBox">
        <div class="topBox">
            <div class="topTitle">智能合同推荐</div>
            <div class="topTip">根据您的需求，为您推荐最适合的合同模板和解決方案</div>
            <div class="topBtn">
                <div class="img1" @click="openDrawer(1)" style="background-color: #eff5ff;">
                    <img src="../../assets/image/zxl/ruzhi_icon.png" class="img1_img" />
                    <div>
                        <div class="img1_title">入职</div>
                        <div class="img1_txt">为新员工入职准备的标准化劳动合同模板,包含薪酬福利、工作内容等关键条款</div>
                    </div>
                </div>
                <div class="img1" @click="openDrawer(2)" style="background-color: #ecfff4;">
                    <img src="../../assets/image/zxl/zaizhi_icon.png" class="img1_img" />
                    <div>
                        <div class="img1_title">在职</div>
                        <div class="img1_txt">针对在职员工的合同更新建议，包括薪资调整、职位变更等条款修改</div>
                    </div>
                </div>
                <div class="img1" @click="openDrawer(3)" style="background-color: #fff5f5;">
                    <img src="../../assets/image/zxl/lizhi_icon.png" class="img1_img" />
                    <div>
                        <div class="img1_title">离职</div>
                        <div class="img1_txt">为员工离职准备的完整协议模板，涵盖保密条款、竞业限制等内容</div>
                    </div>
                </div>
                <div class="img2"><img src="../../assets/image/zxl/robot.png" /></div>
            </div>
        </div>
        <div class="bottomBox">
            <el-input v-model="queryForm.keywords" :prefix-icon="Search"
                style="width: 643px;height: 36px;border-radius: 6px 0px 0px 6px !important;" placeholder="请输入关键字查询" clearable>
            </el-input>
            <el-button style="width: 72px;height: 36px;font-size: 16px;border-radius: 0px 6px 6px 0px;" type="primary" size="mini" color="#01509f" @click="getList">搜索</el-button>
            <div class="sceneBox">
                <span>场景：</span>
                <span v-for="(item, index) in sceneArr" :key="index" class="sceneItem"
                    :class="selectIndex1 == index ? 'sceneSelect' : ''" @click="setNodeSelection(item, index)">{{
                        item.title }}</span>
            </div>
            <div class="typeBox">
                <span>分类：</span>
                <span v-for="(item, index) in typeArr" :key="index" class="typeItem"
                    :class="selectIndex2 == index ? 'typeSelect' : ''" @click="setNodeSelection1(item, index)">{{
                        item.title }}</span>
            </div>
            <div class="laborBox">
                <div class="laborItem" v-for="(item, index) in contractArr" :key="index" @click="openDetail(item)">
                    <div class="laborTop">
                        <img :src="item.picture" class="laborImg" />
                        <div class="controls">
                            <!-- <div class="control-button" v-if="item.file_path"
                                @click.stop="downloadFile(item.file_path, item.file_path_name)">下载清洁版</div>
                            <div class="control-button" v-if="item.comments_path"
                                @click.stop="downloadFile(item.comments_path, item.comments_path_name)">下载批注版</div> -->
                            <div class="control-button" @click.stop="openDetail(item)">查看详情</div>
                        </div>
                    </div>
                    <div class="laborBot">
                        <span>{{ item.contract_name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <Pagination :total="total" :current-page="queryForm.page" :page-size="queryForm.limit"
            @pagination-change="handlePaginationChange" />

        <el-drawer v-model="open" :with-header="false" size="868px">
            <div class="drawerBox">
                <img src="../../assets/image/zxl/top.png" style="width: 868px;height: 118px;" />
                <img src="../../assets/image/zxl/topWarn.png" style="width: 507px;height: 38px;margin-top: 16px;" />
                <div class="questionBox">
                    <div class="questionItem" v-for="(item, index) in questionArr" :key="index">
                        <div class="questionTitle">
                            <span class="indexClass"> {{ index + 1 }}</span>
                            <span class="textClass">{{ item.content }}:</span>
                        </div>
                        <div class="answerBox">
                            <el-radio-group v-model="answerArr[index]">
                                <el-radio class="radioClass" v-for="(item1, index1) in item.answer" :key="index1"
                                    :label="item1.id" @input="getNextQuestion(index, index1)">{{
                                        item1.content }}</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
                <div class="btnBox">
                    <el-button @click="resetSelect" style="margin-right: 10px;">重置</el-button>
                    <el-button type="primary" size="mini" color="#01509f" @click="confirmSelect">确认</el-button>
                </div>
                <div class="contractBox" v-if="open1">
                    <span class="boxTitle">推荐合同类型</span>
                    <div class="contractListBox">
                        <div class="noListTip" v-if="selectContractArr.length == 0">暂无推荐合同类型～您可前往模板中心，根据实际用工场景挑选适配合同模板。
                        </div>
                        <div v-if="selectContractArr.length != 0" class="showBox">
                            <div class="contractItem" v-for="(item, index) in selectContractArr" :key="index"
                                :style="{ marginBottom: index == selectContractArr.length - 1 ? '0px' : '17px' }">
                                <div style="width: 26px;height: 26px;margin-right: 17px;">
                                    <img v-if="getFileExtension(item.comments_path || item.file_path) == 'doc' || getFileExtension(item.comments_path || item.file_path) == 'docx'"
                                        src="../../assets/image/zxl/doc.png" style="width: 100%;height: 100%;" />
                                    <img v-if="getFileExtension(item.comments_path || item.file_path) == 'xls' || getFileExtension(item.comments_path || item.file_path) == 'xlsx'"
                                        src="../../assets/image/zxl/xls.png" style="width: 100%;height: 100%;" />
                                    <img v-if="getFileExtension(item.comments_path || item.file_path) == 'txt'"
                                        src="../../assets/image/zxl/txt.png" style="width: 100%;height: 100%;" />
                                    <img v-if="getFileExtension(item.comments_path || item.file_path) == 'pdf'"
                                        src="../../assets/image/zxl/pdf.png" style="width: 100%;height: 100%;" />
                                    <img v-if="getFileExtension(item.comments_path || item.file_path) != 'doc' && getFileExtension(item.comments_path || item.file_path) != 'docx' && getFileExtension(item.comments_path || item.file_path) != 'xls' && getFileExtension(item.comments_path || item.file_path) != 'xlsx' && getFileExtension(item.comments_path || item.file_path) != 'pdf' && getFileExtension(item.comments_path || item.file_path) != 'txt'"
                                        src="../../assets/image/zxl/other.png" style="width: 100%;height: 100%;" />
                                </div>
                                <div class="contractName">
                                    {{ item.comments_path_name || item.file_path_name }}
                                </div>
                                <div class="downloadBtn" @click="downloadFile1(item)">
                                    下载模板
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tipBox" v-if="selectTip">
                    <span>Tips：</span>
                    <span v-html="selectTip"></span>
                    <!-- <span>{{ selectTip }}</span> -->
                </div>
            </div>
        </el-drawer>

        <el-dialog v-model="open2" title="合同详情" width="580" :before-close="handleClose">
            <el-divider />
            <div class="detailBox">
                <img :src="detailInfo.picture" class="detailImg">
                <div class="detailInfoBox">
                    <span class="detailTitle">合同简介</span>
                    <span class="detailText" style="display: flex;align-items: flex-start;"><span
                            style="flex-shrink: 0;">合同名称：</span><span>{{ detailInfo.contract_name }}</span></span>
                    <span class="detailText">合同场景：{{ detailInfo.scene_name }}</span>
                    <span class="detailText">合同类别：{{ detailInfo.cate_name }}</span>
                    <span class="detailText">关键词：{{ detailInfo.keywords ? detailInfo.keywords : '无' }}</span>
                    <span class="detailText" style="flex: 1;">下载次数：{{ detailInfo.downloads }}</span>
                    <span class="detailBtn" @click.stop="downloadFile1(detailInfo)">立即下载</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from '@/TUIKit/adapter-vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { Download, Search } from '@element-plus/icons-vue'
import Pagination from "@/components/Pagination.vue";
import { getSceneList, getCateList, getContractList, getQuestion, downloadContract } from "@/api/xl";


onMounted(() => {
    getSceneList().then(res => {
        sceneArr.value = [{ id: 0, title: '全部' }].concat(res.data);
        changeCate(0)
        getList()
    });
});

const open = ref(false)
const open1 = ref(false)
const open2 = ref(false)
const queryForm = ref({
    keywords: '',
    page: 1,
    limit: 24,
    scene_id: '',
    cate_id: ''
})
const total = ref(0);
const sceneArr = ref([])
const questionArr = ref([])
const answerArr = ref([])
const selectContractArr = ref([])
const selectTip = ref('')
const typeArr = ref([])
const contractArr = ref([])
const detailInfo = ref({})
const selectIndex1 = ref(0)
const selectIndex2 = ref(-1)

const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    queryForm.value.page = page;
    queryForm.value.limit = size;
    getList()
};
const setNodeSelection = (item, index) => {
    selectIndex1.value = index;
    selectIndex2.value = 0;
    queryForm.value.cate_id = 0
    queryForm.value.scene_id = item.id
    changeCate(item.id)
    getList()
}
const setNodeSelection1 = (item, index) => {
    selectIndex2.value = index;
    queryForm.value.cate_id = item.id
    getList()
}
const changeCate = (id) => {
    // selectIndex2.value = 0;
    getCateList(id).then(res => {
        typeArr.value = [{ id: 0, title: '全部' }].concat(res.data);;
    });
}
const openDetail = (row) => {
    open2.value = true;
    detailInfo.value = row;
}
const handleClose = (done: () => void) => {
    done()
}
const openDrawer = (type) => {
    // selectIndex2.value = 0;
    answerArr.value = [];
    selectContractArr.value = [];
    selectTip.value = '';
    open1.value = false
    getQuestion({ cate_id: type }).then(res => {
        questionArr.value = [].concat(res.data)
        open.value = true
    });
}
const getNextQuestion = (index, index1) => {
    if (questionArr.value[index].answer[index1].next_question != 0) {
        getQuestion({ id: questionArr.value[index].answer[index1].next_question }).then(res => {
            questionArr.value.splice(index + 1, 1, res.data)
        });
    }
    questionArr.value.splice(index + 1)
    answerArr.value.splice(index + 1)
    selectContractArr.value = [];
    selectTip.value = '';
    open1.value = false
}
const resetSelect = () => {
    questionArr.value = [].concat(questionArr.value[0]);
    answerArr.value = [];
    selectContractArr.value = [];
    selectTip.value = '';
    open1.value = false
}
const confirmSelect = () => {
    if (answerArr.value.length !== questionArr.value.length) {
        ElMessage({
            message: "请先选择最后一题用工场景，获取精准合同推荐。",
            grouping: true,
            type: "error",
        });
        return;
    }
    open1.value = true
    let endObj = questionArr.value[questionArr.value.length - 1]
    let endNumber = answerArr.value[answerArr.value.length - 1];
    for (let i = 0; i < endObj.answer.length; i++) {
        if (endObj.answer[i].id == Number(endNumber)) {
            selectContractArr.value = endObj.answer[i].contract;
            selectTip.value = endObj.answer[i].tips;
        }
    }
}
const getList = () => {
    getContractList(queryForm.value).then(res => {
        contractArr.value = res.data;
        total.value = res.count
    });
}
const downloadFile = async (file, name) => {
    const url = file // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = name; // 自定义下载文件名
    a.rel = 'noopener noreferrer';
    a.setAttribute('crossorigin', 'anonymous')
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const downloadFile1 = (item) => {
    const url = item.comments_path || item.file_path// 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = item.comments_path_name || item.file_path_name; // 自定义下载文件名
    a.rel = 'noopener noreferrer';
    a.setAttribute('crossorigin', 'anonymous')
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    if (item.comments_path) {
        downloadContract({
            cid: item.id,
            is_comments_path: 1
        }).then(res => {

        });
    } else {
        downloadContract({
            cid: item.id,
            is_file_path: 1
        }).then(res => {

        });
    }
}
const getFileExtension = (url) => {
    url = url.trim();
    // 找到最后一个点的索引
    let lastDotIndex = url.lastIndexOf('.');
    // 若存在点且不在末尾，则提取后缀
    if (lastDotIndex > 0 && lastDotIndex < url.length - 1) {
        return url.substring(lastDotIndex + 1).toLowerCase();
    }
    return "other";
}
</script>

<style lang="scss" scoped>
.app-main {
    // scrollbar-width: 0;
    overflow-y: scroll !important;
}

.el-drawer__body {
    padding: 0;
}

::v-deep .el-input__wrapper {
    border-radius: 6px 0 0 6px !important;
}

.el-divider--horizontal {
    margin: 0;
}

.detailBox {
    margin-top: 21px;
    display: flex;
    // padding: 0 24px;

    .detailImg {
        width: 328px;
        height: 386px;
        margin-right: 25px;
        border-radius: 12px;
        border: 2px solid #eaeaea;
    }


    .detailInfoBox {
        display: flex;
        flex-direction: column;

        .detailTitle {
            font-size: 16px;
            color: #333;
            margin-bottom: 21px;
        }

        .detailText {
            font-size: 14px;
            color: #666;
            margin-bottom: 14px;
        }

        .detailBtn {
            width: 100%;
            height: 30px;
            border-radius: 6px;
            background-color: #01509f;
            line-height: 30px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .detailBtn:hover {
            transform: scale(1.05) !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }
}

.drawerBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 16px;
    overflow-x: hidden;

    .btnBox {
        .el-button {
            width: 78px;
            height: 36px;
            border-radius: 6px;
            line-height: 36px;
            text-align: center;
        }
    }

    .tipBox {
        margin-top: 28px;
        box-sizing: border-box;
        width: 507px;
        padding: 11px;
        border-radius: 6px;
        background-color: #f3f8fb;
        color: #01509f;
        font-size: 12px;
        display: flex;
        align-items: flex-start;
    }

    .contractBox {
        margin-top: 30px;
        width: 506px;
        // min-height: 172px;
        padding-bottom: 20px;
        border-radius: 10px;
        background: linear-gradient(to bottom, #f3f8fb, #c1d6eb);
        position: relative;
        box-sizing: border-box;

        .boxTitle {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            text-align: center;
            color: #fff;
            background-color: #01509f;
            border-top-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        .contractListBox {
            background-color: #fff;
            width: 468px;
            // min-height: 105px;
            border-radius: 8px;
            margin-top: 47px;
            margin-left: 19px;
            box-sizing: border-box;

            .noListTip {
                color: #999;
                font-size: 16px;
                text-align: center;
                padding: 28px 60px;
            }

            .showBox {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 18px 26px;
                box-sizing: border-box;

                .contractItem {
                    display: flex;
                    align-items: center;

                    .contractName {
                        font-size: 12px;
                        color: #666666;
                        flex: 1;
                        max-width: 325px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .downloadBtn {
                        color: #01509f;
                        font-size: 12px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .questionBox {
        width: 507px;
        margin-top: 28px;

        .questionItem {
            margin-bottom: 26px;

            .questionTitle {
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .indexClass {
                    width: 14px;
                    height: 14px;
                    border-radius: 14px;
                    background-color: #f3f8fb;
                    color: #01509f;
                    font-size: 10px;
                    line-height: 14px;
                    text-align: center;
                    margin-right: 7px;
                }

                .textClass {
                    font-size: 14px;
                    color: #333333;
                    margin-top: -2px;
                }
            }

            .answerBox {
                background-color: #f3f8fb;
                border-radius: 6px;
                width: 486px;
                padding: 20px 22px 0 22px;
                box-sizing: border-box;

                .el-radio-group {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    font-size: 12px;
                    color: #01509f;

                    .el-radio {
                        margin-bottom: 20px;
                        margin-right: 0;
                        white-space: normal;
                        height: auto;
                        display: flex;
                        align-items: flex-start;
                        line-height: 28px;

                        ::v-deep .el-radio__label {
                            margin-top: -8px;
                        }
                    }
                }
            }
        }
    }
}

.mainBox::-webkit-scrollbar {
    display: none;
}

.mainBox {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    .topBox {
        background-color: #fff;
        border-radius: 12px;
        padding: 17px;
        box-sizing: border-box;

        .topTitle {
            font-size: 20px;
            font-weight: bolder;
            color: #333333;
        }

        .topTip {
            font-size: 14px;
            color: #666666;
            margin-top: 13px;
        }

        .topBtn {
            display: flex;
            align-items: center;
            margin-top: 19px;
            // cursor: pointer;

            .img1 {
                width: 386px;
                height: 89px;
                margin-right: 24px;
                // box-sizing: border-box;
                border-radius: 6px;
                padding: 0px 16px 0 20px;
                cursor: pointer;
                display: flex;
                align-items: center;

                .img1_img {
                    width: 52px;
                    height: 52px;
                    border-radius: 52px;
                    margin-right: 13px;
                }

                .img1_title {
                    font-size: 16px;
                    color: #333333;
                    font-weight: bolder;
                    margin-bottom: 8px;
                }

                .img1_txt {
                    font-size: 14px;
                    color: #666666;
                    padding: 0;
                }
            }

            .img2 {
                width: 86px;
                height: 105px;
                margin-left: 12px;
            }
        }
    }

    .bottomBox {
        background-color: #fff;
        border-radius: 12px;
        overflow-y: scroll;
        padding: 17px;
        box-sizing: border-box;
        margin-top: 22px;

        ::v-deep .el-input-group__append {
            background-color: #01509f !important;
            border-color: transparent;
            color: #fff;
        }

        .sceneBox {
            display: flex;
            align-items: center;
            margin-top: 18px;
            color: #666;
            font-size: 16px;

            .sceneItem {
                width: 48px;
                height: 30px;
                border-radius: 4px;
                line-height: 30px;
                text-align: center;
                margin-right: 33px;
                cursor: pointer;
            }

            .sceneSelect {
                background-color: #f3f8fb;
                color: #01509f;
            }
        }

        .typeBox {
            display: flex;
            align-items: center;
            margin-top: 9px;
            color: #666;
            font-size: 16px;

            .typeItem {
                //width: 76px;
                height: 30px;
                border-radius: 4px;
                line-height: 30px;
                text-align: center;
                margin-right: 33px;
                padding: 0 12px;
                cursor: pointer;
            }

            .typeSelect {
                background-color: #f3f8fb;
                color: #01509f;
            }
        }

        .laborBox {
            border-top: 1px solid #eaeaea;
            margin-top: 24px;
            padding: 18px 0 18px 21px;
            display: flex;
            flex-wrap: wrap;

            .laborItem {
                width: 174px;
                height: 260px;
                box-sizing: border-box;
                border-radius: 4px;
                margin-right: 21px;
                border: 1px solid #eaeaea;
                margin-bottom: 20px;
                box-sizing: border-box;

                .controls {
                    position: absolute;
                    inset: 0;
                    background-color: rgba(0, 0, 0, 0.4);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                    backdrop-filter: blur(2px);
                    padding-bottom: 20px;
                    /* 背景虚化效果 */
                }

                .laborTop:hover {
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                    transform: translateY(-2px);
                }

                .laborTop:hover .controls {
                    opacity: 1;
                    pointer-events: auto;
                }

                .control-button {
                    width: 120px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 6px;
                    background-color: #01509f;
                    color: #fff;
                    font-size: 12px;
                    // display: flex;
                    // justify-content: center;
                    // align-items: center;
                    // margin: 0 8px;
                    cursor: pointer;
                    // transform: translateY(10px);
                    opacity: 0;
                    // transition: all 0.3s ease;
                }

                .laborTop:hover .control-button {
                    transform: translateY(0);
                    opacity: 1;
                }

                .control-button:hover {
                    // background-color: #f00;
                    // transition: 0.s;
                    transform: scale(1.1) !important;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                }

                // .control-button:nth-child(1) {
                //     transition-delay: 0.1s;
                //     margin-bottom: 12px;
                // }

                // .control-button:nth-child(2) {
                //     transition-delay: 0.15s;
                // }

                .laborTop {
                    background-color: #f5f5f5;
                    padding: 10px 10px 14px 10px;
                    box-sizing: border-box;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    transition: all 0.3s ease;

                    .laborImg {
                        width: 153px;
                        height: 178px;
                    }
                }

                .laborBot {
                    background-color: #fff;
                    padding: 10px 10px 0 10px;
                    box-sizing: border-box;

                    span {
                        font-size: 14px;
                        color: #333;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}
</style>
